import React from 'react';
import {inject, observer} from 'mobx-react';
import { Route, withRouter, Switch, Redirect } from 'react-router-dom';
import { Icon, SearchBar, Tools, } from 'weaver-mobile';
import { TabPage, SearchAdvanced } from 'weaver-mobile-page';

import BlogComment from '../public/BlogComment';
import HisBlogRoute from '../hisBlog/HisBlogRoute';

const getLabel = Tools.getLabel;

const store = [
  'myBlogStore',
  'blogHomeStore',
]

@withRouter
@inject(...store)
@observer
export default class MyBlog extends React.Component {
  static defaultProps = {
    prefixCls: 'blog-myblog'
  }

  constructor(props) {
    super(props);
    this.state = {
      id: '',
    } 
  }

  componentDidMount() {
    const { myBlogStore: { search, getMenuCountData } } = this.props;
    getMenuCountData();
    search.getData({
      url:`/api/blog/base/blogSearchCondition`,
      method: `GET`,
      params: {listType:'myblog'}
    });
    this.props.blogHomeStore.setState({hidden: false});
  }

  componentWillReceiveProps(nextProps) {
    // fix： 手动切路由的时候，不走接口问题
    const prePath = this.props.location.pathname;
    const curPath = nextProps.location.pathname;
    if (curPath && curPath !== prePath) {
      if(curPath !== '/myBlog/blog/myBlogAdsearch' && prePath !== '/myBlog/blog/myBlogAdsearch'){//高级搜索不初始化
        nextProps.myBlogStore.initCondition();
      }

    }
  }

  componentWillUnmount() {
    const {myBlogStore: {initCondition}} = this.props;
    initCondition();
  }

  // 点击tab页切换
  changeTab = (tab,index) => {
    const {myBlogStore: {initCondition, setCommentCount}} = this.props;
    let path = '';
    initCondition()
    switch(index) {
      case 0: path = '/myBlog/blog'; break;
      case 1: path = '/myBlog/comment';setCommentCount(); break;
      case 2: path = '/myBlog/prise'; break;
      case 3: path = '/myBlog/atMe'; break;
      default: return;
    }
    this.props.history.push(path);
  }

  // 更具路由获得当前的page
  getPage = (path) => {
    let page = 0;
    switch(path) {
      case '/myBlog/blog': page = 0; break;
      case '/myBlog/comment': page = 1; break;
      case '/myBlog/prise': page = 2; break;
      case '/myBlog/atMe': page = 3; break;
      default: return;
    }
    return page;
  }

  onSearch = (val) => {
    const {myBlogStore: { getMyBlogList }} = this.props;
    getMyBlogList({content: val})
  }

  // 微博
  renderBlog = () => {
    const { myBlogStore: { search, searchBlog, updateAdSearchSubject, searchAdValue, setStoreState, photoSwipePage }, prefixCls } = this.props;
    const btnData = [
      { key: 'reset',
        text: getLabel(2022,"重置"),
        onClick: () => {
          setStoreState({ searchAdValue: '' });
          search.form.resetFields();
        }
      },
      { key: 'submit',
        text: getLabel(826,"确定"),
        onClick: () => {
          searchBlog();
          this.props.history.push("/myBlog/blog");
        },
        type: 'primary',
      }
    ];
    return (
      <div className={`${prefixCls}-blog`} key="blog">
        <SearchBar
          value={searchAdValue}
          placeholder={getLabel(500351, '请输入关键字')}
          showExtraButton
          extraButton={[{ key: 'advanced', show: <Icon key='filter-o' type='filter-o' /> }]}
          onExtraButtonClick={() => this.props.history.push(search.path)}
          onChange={val => updateAdSearchSubject(val)}
          onSubmit={searchBlog}
        />
        <SearchAdvanced
          store={search}
          onChange={(condition, value) => {
            if(condition.domkey[0] === 'content') { 
              setStoreState({ searchAdValue: value }); 
            }
          }}
          buttonGroupData={btnData} 
        />
        <div className={`${prefixCls}-blog-main`}>
          <BlogComment path="/myBlog/blog" id="writeMyBlog" replyStore={this.props.myBlogStore} storeName='myBlog' photoSwipePage={photoSwipePage} />
        </div>
      </div>
    );
  }

  // 评论
  renderComment = () => {
    const { prefixCls } = this.props;
    return (
      <div className={`${prefixCls}-comment`} key="comment">
        <BlogComment path="/myBlog/comment" id="writeComment" replyStore={this.props.myBlogStore} storeName='comment' />
      </div>
    );
  }

  // 赞
  renderPrise = () => {
    const { prefixCls } = this.props;
    return (
      <div className={`${prefixCls}-prise`} key="prise">
        <BlogComment path="/myBlog/prise" id="writePrise" replyStore={this.props.myBlogStore} storeName='laud' />
      </div>
    );
  }

    // at我
    renderAtMe = () => {
      const { prefixCls } = this.props;
      return (
        <div className={`${prefixCls}-prise`} key="prise">
          <BlogComment 
            path="/myBlog/atMe" 
            id="writeAtMe" 
            replyStore={this.props.myBlogStore} 
            storeName='atMe'
            avatarClick={(data)=>this.setState({id: data.id},()=>{
              this.props.history.push(`/myBlog/atMe/hisBlog/${data.id}`)
            })}
          />
        </div>
      );
    }

    

  componentDidUpdate(prevProps, prevState) {
      this.setTitle();
   }
   setTitle = () => {
    let title = getLabel(26468, '我的微博');
    if (window.em && (typeof window.em.checkJsApi === 'function') && window.em.checkJsApi('changeTitle')) {
      window.em.changeTitle({ title });
    }
    window.document.title = title;
  }
  render() {
    const { myBlogStore: { commentCount, searchAdValue, photoSwipePage }, prefixCls } = this.props;
    const tabs = [
      { title: <div>{getLabel(26467,'微博')}</div> },
      { title: <div>{getLabel(675,'评论')}{commentCount > 0 && <span style={{color: 'red'}}>({commentCount})</span>}</div> },
      { title: <div>{getLabel(32942,'赞')}</div> },
      { title: <div>{getLabel(503746,'@我')}</div> },
    ];
    const tabProps = {
      onChange: (tab,index) => { this.changeTab(tab, index) },
      page: this.getPage (this.props.location.pathname),
    };
    return (
      <div className={prefixCls}>
        <TabPage
          tabs={tabs}
          tabProps={tabProps}
        />
        <Switch>
          <Route id="blog" path="/myBlog/blog" render={() => this.renderBlog()}/>
          <Route id="comment" path="/myBlog/comment" render={() => this.renderComment()}/>
          <Route key="prise" path="/myBlog/prise" render={() => this.renderPrise()}/>
          <Route key="atMe" path="/myBlog/atMe" render={() => this.renderAtMe()}/>
          <Redirect exact path="/myBlog" to={{pathname: '/myBlog/blog'}} />
        </Switch>
        <HisBlogRoute path='/myBlog/atMe/hisBlog' userId={this.state.id}/>
      </div>
    );
  }
}